<template>
  <div>
    <el-button-group>
      <el-button plain icon="el-icon-edit" @click="handleInfoEdit">编辑个人信息</el-button>
      <el-button plain icon="el-icon-tickets" @click="handleProcessEdit">完善发展流程</el-button>
      <el-tooltip class="item" effect="dark" content="数据无价，谨慎删除" placement="top-end">
        <el-button plain icon="el-icon-delete" @click="handleDelete">删除</el-button>
      </el-tooltip>
    </el-button-group>
    <el-divider />
    <el-collapse v-model="activeCollapse" @change="handleChange">
      <el-collapse-item name="1">
        <template slot="title">
          <span>
            <a
              style="color:#409EFF"
            >{{ FormData.username+'('+FormData.category+','+FormData.post+')' }}</a>
          </span>
          <i class="el-icon-user-solid" />
        </template>
        <el-card>
          <el-table :data="TableData">
            <el-table-column prop="gender" label="性别" />
            <el-table-column prop="borntime" label="出生年月" />
            <el-table-column prop="ruwutime" label="入W时间" />
            <el-table-column prop="nation" label="民族" />
            <el-table-column prop="natipl" label="籍贯" />
            <el-table-column prop="educa" label="文化程度" />
          </el-table>
        </el-card>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <span>入党积极分子发展流程</span>
          <i class="el-icon-caret-bottom" />
        </template>
        <div class="block">
          <el-timeline>
            <el-timeline-item
              timestamp
              placement="top"
              :icon="FormData.sqrdtime?'el-icon-circle-check':''"
              :color="FormData.sqrdtime?'#409EFF':'#909399'"
            >
              <el-card>
                <h4>申请入党时间</h4>
                <p>{{ FormData.sqrdtime }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              timestamp
              placement="top"
              :icon="FormData.prthsitu?'el-icon-circle-check':''"
              :color="FormData.prthsitu?'#409EFF':'#909399'"
            >
              <el-card>
                <h4>派人谈话情况</h4>
                <p>{{ FormData.prthsitu }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              timestamp
              placement="top"
              :icon="FormData.dxztmsitu?'el-icon-circle-check':''"
              :color="FormData.dxztmsitu?'#409EFF':'#909399'"
            >
              <el-card>
                <h4>党小组提名情况</h4>
                <p>{{ FormData.dxztmsitu }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              timestamp
              placement="top"
              :icon="FormData.tzbtjsitu?'el-icon-circle-check':''"
              :color="FormData.tzbtjsitu?'#409EFF':'#909399'"
            >
              <el-card>
                <h4>团支部推荐情况</h4>
                <p>{{ FormData.tzbtjsitu }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              timestamp
              placement="top"
              :icon="FormData.dzbtjsitu?'el-icon-circle-check':''"
              :color="FormData.dzbtjsitu?'#409EFF':'#909399'"
            >
              <el-card>
                <h4>党支部研究情况</h4>
                <p>{{ FormData.dzbtjsitu }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template slot="title">
          <span>党员发展对象考察情况</span>
          <i class="el-icon-caret-bottom" />
        </template>
        <div class="block">
          <el-timeline>
            <el-timeline-item
              timestamp
              placement="top"
              :icon="FormData.pylxr?'el-icon-circle-check':''"
              :color="FormData.pylxr?'#409EFF':'#909399'"
            >
              <el-card>
                <h4>培养联系人</h4>
                <p>{{ FormData.pylxr }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              timestamp
              placement="top"
              :icon="FormData.dqkcsitu?'el-icon-circle-check':''"
              :color="FormData.dqkcsitu?'#409EFF':'#909399'"
            >
              <el-card>
                <h4>定期考察情况</h4>
                <p>{{ FormData.dqkcsitu }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              timestamp
              placement="top"
              :icon="FormData.qdfzdx?'el-icon-circle-check':''"
              :color="FormData.qdfzdx?'#409EFF':'#909399'"
            >
              <el-card>
                <h4>确定为党员发展对象</h4>
                <p>{{ FormData.qdfzdx }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-collapse-item>
      <el-collapse-item name="4">
        <template slot="title">
          <span>发展为预备党员</span>
          <i class="el-icon-caret-bottom" />
        </template>
        <div class="block">
          <el-timeline>
            <el-timeline-item
              timestamp
              placement="top"
              :icon="FormData.dyfzzzkh?'el-icon-circle-check':''"
              :color="FormData.dyfzzzkh?'#409EFF':'#909399'"
            >
              <el-card>
                <h4>政治考核</h4>
                <p>{{ FormData.dyfzzzkh }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              timestamp
              placement="top"
              :icon="FormData.dyfzpxsitu?'el-icon-circle-check':''"
              :color="FormData.dyfzpxsitu?'#409EFF':'#909399'"
            >
              <el-card>
                <h4>培训情况</h4>
                <p>{{ FormData.dyfzpxsitu }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              timestamp
              placement="top"
              :icon="FormData.sjdwys?'el-icon-circle-check':''"
              :color="FormData.sjdwys?'#409EFF':'#909399'"
            >
              <el-card>
                <h4>提交上级党委预审</h4>
                <p>{{ FormData.sjdwys }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              timestamp
              placement="top"
              :icon="FormData.dwyssitu?'el-icon-circle-check':''"
              :color="FormData.dwyssitu?'#409EFF':'#909399'"
            >
              <el-card>
                <h4>党委预审情况</h4>
                <p>{{ FormData.dwyssitu }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              timestamp
              placement="top"
              :icon="FormData.qdydsitu?'el-icon-circle-check':''"
              :color="FormData.qdydsitu?'#409EFF':'#909399'"
            >
              <el-card>
                <h4>确定为预备党员</h4>
                <p>{{ FormData.qdydsitu }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- Dialog--提交信息--编辑信息 -->
    <el-dialog v-if="dialogInfoForm" :title="InfoTitle" :visible.sync="dialogInfoForm">
      <el-form ref="Info_form" :model="Info_form" :rules="formrules">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="Info_form.username" maxlength="10" show-word-limit />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="Info_form.gender">
            <el-option label="男" value="男" selected />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="类别" prop="classify">
          <el-select v-model="Info_form.classify">
            <el-option label="入党积极分子" value="jjfz" />
            <el-option label="党员发展对象" value="fzdx" />
            <el-option label="预备党员" value="ybdy" />
          </el-select>
        </el-form-item>
        <el-form-item label="部职别" prop="post">
          <el-input v-model="Info_form.post" />
        </el-form-item>
        <el-form-item label="出生年月" prop="borntime">
          <el-date-picker
            v-model="Info_form.borntime"
            type="month"
            placeholder="选择日期"
            format="yyyy-MM"
            value-format="yyyy-MM"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="入伍时间" prop="ruwutime">
          <el-date-picker
            v-model="Info_form.ruwutime"
            type="month"
            placeholder="选择日期"
            format="yyyy-MM"
            value-format="yyyy-MM"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="民族" prop="nation">
          <el-input v-model="Info_form.nation" />
        </el-form-item>
        <el-form-item label="籍贯" prop="natipl">
          <el-input v-model="Info_form.natipl" />
        </el-form-item>
        <el-form-item label="学历" prop="educa">
          <el-input v-model="Info_form.educa" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('Info_form')">立即提交</el-button>
          <el-button @click="resetForm('Info_form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- Dialog--提交信息--编辑信息 -->
    <el-dialog
      v-if="dialogProcessForm"
      :title="ProcessTitle"
      :visible.sync="dialogProcessForm"
      width="75%"
    >
      <el-steps :active="ProcessActive" align-center>
        <el-step :title="'步骤'+(stepNum+1)" :icon="Icon1" :description="labelArray[stepNum]" />
        <el-step :title="'步骤'+(stepNum+2)" :icon="Icon2" :description="labelArray[stepNum+1]" />
        <el-step :title="'步骤'+(stepNum+3)" :icon="Icon3" :description="labelArray[stepNum+2]" />
      </el-steps>
      <el-form :model="Process_form">
        <el-form-item v-if="startFlag" label="申请入党时间" prop="sqrdtime">
          <el-input v-model="Process_form.sqrdtime" />
        </el-form-item>
        <el-form-item v-if="!startFlag" :label="labelArray[stepNum+1]" :prop="propArray[stepNum+1]">
          <el-input v-model="Process_form[propArray[stepNum+1]]" />
        </el-form-item>
      </el-form>
      <el-button-group>
        <el-button :disabled="startFlag" @click="lastProcess">{{ lastReminder }}</el-button>
        <el-button :disabled="endFlag" @click="nextProcess">{{ nextReminder }}</el-button>
      </el-button-group>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'DyfzMember',
  data: () => ({
    activeCollapse: ['1', '2'],
    FormData: {},
    InfoTitle: '',
    ProcessTitle: '',
    TableData: [],
    dialogInfoForm: false,
    Info_form: {},
    dialogProcessForm: false,
    Process_form: {},
    ProcessActive: 2,
    nextReminder: '下一步',
    lastReminder: '上一步',
    stepNum: 0,
    startFlag: false,
    endFlag: false,
    Icon1: 'el-icon-d-arrow-right',
    Icon2: 'el-icon-loading',
    Icon3: 'el-icon-d-arrow-right',
    labelArray: [
      '申请入党时间',
      '派人谈话情况',
      '党小组提名情况',
      '团支部推荐情况',
      '党支部研究情况',
      '培养联系人',
      '定期考察情况',
      '确定为党员发展对象',
      '政治考核',
      '培训情况',
      '提交上级党委预审',
      '党委预审情况',
      '确定为预备党员',
      '提交完成'
    ],
    propArray: [
      'sprdtime',
      'prthsitu',
      'dxztmsitu',
      'tzbtjsitu',
      'dzbtjsitu',
      'pylxr',
      'dqkcsitu',
      'qdfzdx',
      'dyfzzzkh',
      'dyfzpxsitu',
      'sjdwys',
      'dwyssitu',
      'qdydsitu'
    ]
  }),
  mounted() {
    this.FormData = this.$route.params.TableData
    if (this.FormData === undefined) {
      this.FormData = JSON.parse(localStorage.getItem('DyfzFormData'))
    }
    localStorage.setItem('DyfzFormData', JSON.stringify(this.FormData))
    this.FormData.category = this.getClassify(this.FormData.classify)
    this.TableData.push(this.FormData)
    this.stepNum = this.getStepNum()
  },
  methods: {
    handleInfoEdit() {
      this.InfoTitle = '编辑个人信息'
      this.Info_form = this.FormData
      this.dialogInfoForm = true
    },
    handleProcessEdit() {
      if (this.stepNum === 0) {
        this.endFlag = false
        this.ProcessActive = 1
        this.Icon1 = 'el-icon-loading'
        this.Icon2 = 'el-icon-d-arrow-right'
        this.startFlag = true
      }
      if (this.stepNum === 11) {
        this.ProcessActive = 3
        this.Icon2 = 'el-icon-d-arrow-right'
        this.endFlag = true
        this.nextReminder = '完成'
      }
      this.ProcessTitle = '编辑发展流程'
      this.Process_form = this.FormData
      this.dialogProcessForm = true
    },
    handleDelete() {
      this.loading = true
      this.$confirm('确认删除？').then(_ => {
        this.$message.success('成功删除')
      })
      this.loading = false
    },
    lastProcess() {
      if (this.stepNum === 11 && this.endFlag === true) {
        this.endFlag = false
        this.ProcessActive = 2
        this.nextReminder = '下一步'
        this.Icon2 = 'el-icon-loading'
        this.Icon3 = 'el-icon-d-arrow-right'
      } else if (this.stepNum === 0) {
        this.ProcessActive = 1
        this.Icon1 = 'el-icon-loading'
        this.Icon2 = 'el-icon-d-arrow-right'
        this.startFlag = true
      } else {
        this.stepNum = (this.stepNum - 1) % 12
      }
    },
    nextProcess() {
      if (this.stepNum === 0 && this.startFlag === true) {
        this.startFlag = false
        this.Icon2 = 'el-icon-loading'
        this.Icon1 = 'el-icon-d-arrow-right'
        this.ProcessActive = 2
      } else if (this.stepNum === 11) {
        this.nextReminder = '完成'
        this.ProcessActive = 3
        this.Icon2 = 'el-icon-d-arrow-right'
        this.endFlag = true
      } else {
        this.stepNum = (this.stepNum + 1) % 12
        this.ProcessActive = 2
      }
    },
    getClassify(temp) {
      switch (temp) {
        case 'jjfz': {
          return '入党积极分子'
        }
        case 'fzdx': {
          return '党员发展对象'
        }
        case 'ybdy': {
          return '预备党员'
        }
      }
    },
    getStepNum() {
      debugger
      let tnum = 0
      while (tnum < 11) {
        if (this.FormData[this.propArray[tnum + 1]] === '') {
          break
        }
        tnum++
      }
      return tnum
    }
  }
}
</script>
